<#import "/base/base.html" as base>
<@base.html  
    title="${(categorySeo.seoTitle)!' '}" 
    keywords="${(categorySeo.seoKeywords)!' '}" 
    description="${(categorySeo.seoDescription)!' '}">
    <div class="bread-bg">
        <div class="bread-crumb">
            <ul>
                <li><a href="/">Home</a></li>
                <li> &gt;</li>
                <#if viewType == "category">
                    <li><a href="/products">Products</a></li>
                    <li> &gt;</li>
                    <li><span>${currentCategory.title!}</span></li>
                <#else>
                    <li><span>Products</span></li>
                </#if>
            </ul>
        </div>
    </div>

    <div class="inner-page-middle">
        <div class="inner-page-content">
            <div class="inner-page-l">
                <div class="sidebar-block">
                    <div class="sidebar-box">
                        <div class="sidebar-title">
                            <span>Products</span>
                        </div>
                        <div class="sidebar-contant sidebar-product">
                            <#if nav_products??>
                                <#list nav_products as product>
                                    <dl>
                                        <dt>
                                            <a href="/products/${product.path!''}"
                                               title="${product.title!''}"
                                               class="${(currentCategory?? && currentCategory.id == product.id)?string('active', '')}">${product.title!''}</a>
                                        </dt>
                                    </dl>
                                </#list>
                            </#if>
                        </div>
                    </div>
                </div>
            </div>

            <div class="inner-page-r">
                <!-- 产品分类页 -->
                <#if viewType == "category">
                    <section class="product-key">
                        <div class="product-key-box">
                            <!--分类标题-->
                            <h1>${currentCategory.title!}</h1>
                            <!--分类描述-->
                        </div>
                    </section>
                    <section class="product-category">
                        <ul>
                            <#if products??>
                                <#list products as product>
                                    <li>
                                        <div class="product-item">
                                            <div class="product-image">
                                                <a href="/products/${currentCategory.path!}/${product.slug!}">
                                                    <img style="width: 300px; height: 300px;"
                                                         alt="${product.title!}"
                                                         src="${product.coverImage!}"
                                                         class="i-amphtml-fill-content i-amphtml-replaced-content">
                                                </a>
                                            </div>
                                            <div class="product-item-text">
                                                <div class="product-item-text-b">
                                                    <a href="/products/${currentCategory.path!}/${product.slug!}">
                                                        <h2>${product.title!}</h2>
                                                    </a>
                                                    <p style="margin-bottom: 30px;">${product.desc!}</p>
                                                    <span>
                                                        <a href="/products/${currentCategory.path!}/${product.slug!}#inquiry_area" title="Email">Email</a>
                                                        <a class="more" href="/products/${currentCategory.path!}/${product.slug!}">Details</a>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </#list>
                            </#if>
                        </ul>
                    </section>
                </#if>

                <!-- 产品列表页 -->
                <#if !viewType?? || viewType == "list">
                    <section class="product-listing">
                        <#if categoriesWithProducts??>
                            <#list categoriesWithProducts as categoryData>
                                <div class="product-listing-t">
                                    <h2>${categoryData.category.title!}</h2>
                                    <span><a href="/products/${categoryData.category.path!}">More+</a></span>
                                </div>
                                <ul>
                                    <#list categoryData.products as product>
                                        <li>
                                            <div class="product-item">
                                                <div class="product-image">
                                                    <a href="/products/${categoryData.category.path!}/${product.slug!}">
                                                        <img width="300" height="300"
                                                             src="${product.coverImage!}"
                                                             alt="${product.title!}">
                                                    </a>
                                                </div>
                                                <div class="product-item-name">
                                                    <h3>
                                                        <a href="/products/${categoryData.category.path!}/${product.slug!}">
                                                            ${product.title!}
                                                        </a>
                                                    </h3>
                                                </div>
                                            </div>
                                        </li>
                                    </#list>
                                </ul>
                            </#list>
                        </#if>
                    </section>
                </#if>

                <!-- 产品详情页 -->
                <#if viewType == "detail">
                    <div class="product-information-t">
                        <h1>${product.title!}</h1>
                    </div>
                    <div class="product-details">
                        <div class="product-page-plan">
                            <section class="cntr">
                                <div class="big_img" style="width: 50%;">
                                    <img style="width: 100%;" src="${product.coverImage!}"
                                         alt="${product.title!}">
                                </div>
                            </section>
                        </div>
                        <div class="product-content">
                            <div class="product-description">
                                <p>${product.desc!}</p>
                            </div>
                            <div class="product-text">
                                ${product.content!}
                            </div>
                            <div class="mail-anchor">
                                <div id="inquiry_area"></div>
                            </div>
                            <div class="inner-message" style="margin-top: 20px">
                                <h4>Mail consultation</h4>
                                <div class="inner-message-centered">
                                    Please feel free to give your inquiry in the form below.
                                    <span> We will reply you in 24 hours. </span>
                                </div>
                                <div class="inner-message-row msg_bl">
                                    <form class="sample-form" method="GET" action="/inquiry_submit" target="_top" custom-validation-reporting="show-all-on-submit">
                                        <div class="item item-half">
                                            <div class="inner-message-half">
                                                <input type="name" id="show-all-on-submit-email" name="name" placeholder="What's your name?">
                                            </div>
                                        </div>
                                        <input type="hidden" name="fromurl" value="www.eschemy.com/aboutus">
                                        <div class="item item-half">
                                            <div class="inner-message-box">
                                                <input type="phone" id="show-all-on-submit-email" name="phone" placeholder="Contact number:">
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="inner-message-box">
                                                <input type="email" id="show-all-on-submit-email" name="email" required="" placeholder="*Your contact email:">
                                            </div>
                                        </div>
                                        <span visible-when-invalid="valueMissing" validation-for="show-all-on-submit-email"></span>
                                        <span visible-when-invalid="typeMismatch" validation-for="show-all-on-submit-email"></span>
                                        <div class="item">
                                            <div class="inner-message-box">
                                                <input type="company" id="show-all-on-submit-email" name="company" placeholder="Your company name:">
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="inner-message-box">
                                                <input type="message" id="show-all-on-submit-message" name="message" required="" placeholder="*What do you wish to enquire about?">
                                            </div>
                                        </div>
                                        <span visible-when-invalid="valueMissing" validation-for="show-all-on-submit-message"></span>
                                        <span visible-when-invalid="typeMismatch" validation-for="show-all-on-submit-message"></span>
                                        <div class="item">
                                            <div class="btn-text" style="display: inline-block;">
                                                <input type="submit" value="Submit">
                                            </div>
                                            <div style="display: inline-block; margin-left: 40px;">
                                                <input checked="" type="checkbox" name="category" value="1" style="width: auto; height: auto;">
                                                <a href="/privacypolicy" target="_blank"><p style="text-decoration: underline;color: #999; display: inline-block;">Privacy
                                                    policy</p></a>
                                                <!--<script>document.getElementsByName("category")[0].checked="checked";</script>-->
                                            </div>
                                        </div>
                                        <div submit-success="">
                                            <template type="amp-mustache">
                                                Success! Thanks {{name}} for trying the
                                                <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form
                                                to see how
                                                <code>amp-form</code> handles errors.
                                            </template>
                                        </div>
                                        <div submit-error="">
                                            <template type="amp-mustache">
                                                Error! Thanks {{name}} for trying the
                                                <code>amp-form</code> demo.
                                            </template>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </#if>
            </div>
        </div>
    </div>
</@base.html>
